<template>
  <cell
    :title="title"
    :value="currentValue"
    :is-link="!readonly"
    value-align="left"
    primary="title"
    @click.native="show"
  >
    <div>
      <span
        v-if="displayValue"
        class="vux-cell-value"
      >{{ displayValue }}</span>
    </div>
    <div>
      <popup
        v-model="showPopup"
        height="100%"
        width="100%"
        position="right"
        style="background-color:#fff;"
        @on-hide="$emit('on-hide')"
        @on-show="$emit('on-show')"
      >
        <search
          ref="search"
          v-model="searchValue"
          :results="results"
          position="fixed"
          @on-focus="onFocus"
          @on-cancel="onCancel"
          @on-submit="onSubmit"
        />
        <van-checkbox
          v-model="currentValue"
          random-order
          :required="required"
          :style="'margin-top:' + radioSearchHeight"
          :options.sync="options"
          @on-change="onValueChange"
        />
      </popup>
    </div>
  </cell>
</template>

<script>
  export default {
  name: 'Many2many',
  // directives: {
  //   TransferDom
  // },
  props: {
    'title': { type: String, default: 'title' },

    'readonly': { type: Boolean },
    'field': { type: Object, default () { return {} } },
    'required': { type: Boolean },
    'optionsDefault': { type: Object, default () { return {} } },
    edit: { type: Boolean, defautl: false }
  }, inject: ['value'],
  data: function () {
    return {
      results: [],
      searchValue: '',
      radioSearchHeight: '0px',
      options: this.options_default || [],
      showPopup: false,
      currentValue: this.value
    }
  },
  computed: {
    displayValue: function () {
      let ChoiceVal = ''
      if (this.options && !this.options.length) {
        return ChoiceVal
      }
      if (typeof this.options[0] === 'object') {
        const match = this.options.filter(option => {
          return this.currentValue.indexOf(option.key) >= 0
        })
        if (match) {
          match.forEach(function (value) {
            if (ChoiceVal) {
              ChoiceVal = ChoiceVal + '</br>' + value.value
            } else {
              ChoiceVal = ChoiceVal + value.value
            }
          })
          return ChoiceVal
        }
      }
      return ChoiceVal
    }
    ,
    pvalue: function () {
      return this.value
    }
  },
  watch: {

    currentValue: function (val) {
      this.$emit('update:value', val)
      this.$emit('update:options_default', this.currentValue)
    }
  },
    mounted: function () {
    // console.log(this.options_default)
    // console.log(this.currentValue)
    // console.log(this.val)
    // console.log(this.field)
    // this.getNewData()
  },
  methods: {
    onValueChange: function (val) {
      // console.log(this.field)
    },
    show: function () {
      if (!this.readonly) {
        this.getNewData()
        this.showPopup = true
      }
    },
    setFocus: function () {
      // this.$refs.search.setFocus()
    },
    onSubmit: function () {
      this.getNewData()
    },
    onFocus: function () {
      this.radioSearchHeight = '45px'
    },
    onCancel: function () {
      this.radioSearchHeight = '0px'
      this.showPopup = false
    },
    hide: function () {
      this.showPopup = false
    },
    getNewData: function () {
      let self = this
      self.$http.get('/odoo/mobile/model/name_search',
        {
          params:
              { model: self.field.model, value: self.searchValue || '', domain: JSON.stringify(self.field.domain || []), limit: 15 }
        }).then(function (response) {
        self.options = response
      }).catch(function (error) {
        console.error("FieldMany2Many获取数据失败",error,__filename,__LINE__)
      })
    }
  }
}
</script>

<style type="less">

</style>
